<template>
	<view>
		
		
		<view class="" style="margin: 20rpx 20rpx;margin-bottom: 100rpx;padding-bottom:200rpx;">
			<view class="" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" >
				<text style=" font-weight: 500;">标题</text>
				<view style="display: flex;align-items: center;justify-content: space-between;margin-top:10rpx;" >
					<u--input
					placeholder="请输入内容"
					border="none"
					v-model="form.title"
				></u--input>
				</view>
			</view>
			<view class="" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" >
				<view style=" font-weight: 500;margin-top:10rpx;">通知范围</view>
				<!-- <u-picker :show="show" :columns="columns" @confirm="confirmRange" @cancel="cancelRange" keyName="label"></u-picker> -->
				<u-popup :show="show" mode="bottom"  @close="cancelRange" closeable>
					<view style="margin:20rpx;margin-top:60rpx;">
						<!-- <view style="display: flex;align-items: center;justify-content: space-between;">
							<text @click="cancelRange">取消</text>
							<text @click="confirmRange">确定</text>
						</view> -->
						<view class="" style="height:700rpx;margin-top:20rpx;overflow-y: scroll;padding-bottom: 30rpx;">
							<u-checkbox-group
								v-model="form.range"
								placement="column"
								@change="checkboxChange"
							>
							<view class="" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" v-for="(item,index) in list" :key="item.id">
								<view class="" style="display: flex;align-items: center;justify-content: space-between;">
									<view style="display: flex;align-items: center;">
										<text style="font-size: 17px;">{{item.name}}</text>
									</view>
									<u-checkbox
										:label="' '"
										:name="item.id"
									>
									</u-checkbox>
								</view>
							</view>
							</u-checkbox-group>
						</view>
						
					</view>
				</u-popup>
				<view style="display: flex;align-items: center;justify-content: space-between;" @click="openRange()">
					<view style="color: #546D8C;width:70%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">{{nameList.length>0 ? nameList.join() : '请选择通知范围'}}</view>
					<u-icon name="arrow-down" color="#A4A4A4" size="28"></u-icon>
				</view>
				
			</view>
			<view class="" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" >
				<text style=" font-weight: 500;"> 任务/通知</text>
				<view style="display: flex;align-items: center;justify-content: space-between;margin-top:10rpx;" >
					<u-radio-group 
						v-model="form.notice_type"
						iconPlacement="right">
						<u-radio style="margin-right:30rpx;" name="1"  label="1">通知</u-radio>
						<u-radio name="2"  label="2">任务</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" >
				<text style=" font-weight: 500;">通知类型</text>
				<view style="display: flex;align-items: center;justify-content: space-between;margin-top:10rpx;" >
					<u-radio-group 
						v-model="form.type"
						iconPlacement="right">
						<u-radio style="margin-right:30rpx;" name="1"  label="1">单次推送</u-radio>
						<u-radio style="margin-right:30rpx;" name="2"  label="2">定时推送</u-radio>
						<u-radio name="0"  label="0">立即推送</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view v-if="(form.notice_type==1||form.notice_type==2)&&form.type!=0" class="" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" >
				<text style=" font-weight: 500;">{{form.notice_type==1 ? '通知时间' : '首次通知时间'}}</text>
				<view style="display: flex;align-items: center;justify-content: space-between;" @click="start_time_show=true">
					<text style="color: #546D8C;">{{ form.notice_time ? form.notice_time :'请选择通知时间'}}</text>
					<u-icon name="arrow-down" color="#A4A4A4" size="28"></u-icon>
				</view>
				<u-datetime-picker
						:show="start_time_show"
						@cancel="startClose"
						@confirm="startConfirm"
						mode="time"
				></u-datetime-picker>
			</view>
			<view class="" v-if="form.notice_type==2&&form.type!=0" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" >
				<text style=" font-weight: 500;">二次通知时间</text>
				<view style="display: flex;align-items: center;justify-content: space-between;" @click="end_time_show=true">
					<text style="color: #546D8C;">{{ form.second_notice_time ? form.second_notice_time :'请选择通知时间'}}</text>
					<u-icon name="arrow-down" color="#A4A4A4" size="28"></u-icon>
				</view>
				<u-datetime-picker
						:show="end_time_show"
						@cancel="endClose"
						@confirm="endConfirm"
						mode="time"
				></u-datetime-picker>
			</view>
			<view v-if="form.notice_type==2&&form.type!=0" class="" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" >
				<text style=" font-weight: 500;">台长通知时间</text>
				<view style="display: flex;align-items: center;justify-content: space-between;" @click="head_time_show=true">
					<text style="color: #546D8C;">{{ form.head_notice_time ? form.head_notice_time :'请选择通知时间'}}</text>
					<u-icon name="arrow-down" color="#A4A4A4" size="28"></u-icon>
				</view>
				<u-datetime-picker
						:show="head_time_show"
						@cancel="headClose"
						@confirm="headConfirm"
						mode="time"
				></u-datetime-picker>
			</view>

			<view class="" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" >
				<text style=" font-weight: 500;">内容</text>
				<u--textarea v-model="form.content" style="margin-top: 10rpx;" placeholder="请输入内容" ></u--textarea>
			</view>
		</view>
		<view class="" style="position: fixed;left: 0;bottom: 20rpx;width: 100%;background:#fff;height:120rpx;">
			<view class="" style="margin: 20rpx;">
				<view  @click="submit" class="btn1">完成</view>
			</view>
			
		</view>


	</view>
</template>

<script>
	import TextShow from '@/components/text-show/text-show.vue'
	import DateTime from '@/components/date-time/date-time.vue'
	export default {
		comments:{
			TextShow,
			DateTime
		},
		data() {
			return {
				checkboxValue1:[],
				start_time:'',
				end_time:'',
				start_time_show:false,
				end_time_show:false,
				form:{
					title:'',
					content:'',
					range:[],
					type:'1',
					notice_type:'1',
					notice_time:'',
					second_notice_time:'',
					head_notice_time:''
				},
				show: false,
                list: [
                ],
				head_time_show:false,
				nameList:[]
				
			}
		},
		onLoad() {
			this.getMediaList()
		},
		methods: {
			checkboxChange(e){
				console.log('checkboxValue1',e);
				this.list.forEach(element => {
					if(e.includes(element.id)){
						this.nameList.push(element.name)
					}
					
				});
			},
			openRange(){
				this.show = true
			},
			getMediaList(){
				this.$api.common.getMediaList({}).then(res => {
					console.log({res});
					if(res.code == 1){
						this.list = res.data
						
					}
					
				})
			},
			cancelRange(){
				this.show = false
			},
			confirmRange(e){
				console.log(e);
				this.show = false
			},
			startConfirm(e){
				console.log(e);
				this.form.notice_time = e.value
				this.start_time_show = false
			},
			startClose(){
				this.start_time_show = false
			},
			endClose(){
				this.end_time_show = false
			},
			endConfirm(e){
				this.form.second_notice_time = e.value
				this.end_time_show = false
			},
			endClose(){
				this.end_time_show = false
			},
			headConfirm(e){
				this.form.head_notice_time = e.value
				this.head_time_show = false
			},
			headClose(){
				this.head_time_show = false
			},
			submit(){
				// if(!(this.checkboxValue1.length>0) || !(this.start_time && this.end_time)){
				// 	return this.$u.toast('请选择时间或用户');
				// }

				 
				this.$api.common.userSecondNotice(this.form).then(res => {
					console.log({res});
					this.$u.toast(res.msg);
					if(res.code == 1){
						setTimeout(() => {
							uni.navigateBack();
						},300)
					}
					
				})

			},
			
			
		}
	}
</script>

<style scoped>
page{
	background-color: #f2f2f2;
}
.btn1{
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		/* border: 0.2rpx solid #000; */
		text-align: center;
		background: linear-gradient(80deg, #0068F0 0%, #0196FE 100%);
		color: #ffffff;
		font-family: "PingFang SC";
		font-style: normal;
		font-weight: 500;
		/* line-height: normal; */
	}
</style>
